headless UIのListbox (Select)
docs
HTML標準のSelectboxはstyleがほとんど出来ないので。
Optionsの幅をfieldに合わせる
code:tsx
return (
<Listbox value={value} onChange={onChange}>
<ListboxButton>...</ListboxButton>
<ListboxOptions
className={cx('w-var(--button-width)')}
anchor="bottom"
w-[var(--button-width)]で指定できる
anchor
例えばviewport内の下の方にいるときに、上向きに選択肢を出せる
ちなみに、headlessuiのListboxの選択肢をviewportからはみ出るように書くと、Maximum update depth exceeded errorになる
再現コード
https://stackblitz.com/edit/react-ts-vxnrdk?file=ListBox.tsx,App.tsx
https://gyazo.com/a0522081711bfd4c936b1ffb76f255e7